<template>
  <div class="personal">
    <TitleBar ref="myTitle"></TitleBar>
    <div class="user-box">
      <div class="set"><img src="../assets/img/default/set.png" alt=""></div>
      <div class="user-name">
        <div class="user-img"><img src="../assets/img/home/bannerBg.jpg" alt=""></div>
        <div class="">VIP123456</div>
      </div>
    </div>
    <div class="classify-box">
      <div class="classify-single">
        <div>12</div>
        <div>积分</div>
      </div>
      <div class="classify-single">
        <div>12</div>
        <div>收藏</div>
      </div>
      <div class="classify-single">
        <div>12</div>
        <div>足迹</div>
      </div>
      <div class="classify-single">
        <div>12</div>
        <div>卡券</div>
      </div>
    </div>
    <div class="margin-box">
      <div class="me-box">
        <div class="me-header">
          <div>我的订单</div>
          <div>查看全部订单 ></div>
        </div>
        <van-tabbar class="indent" :fixed="false" active-color="#000" inactive-color="#000">
          <van-tabbar-item info="1" icon="http://127.0.0.1/img/default/wallet.png">待付款</van-tabbar-item>
          <van-tabbar-item icon="http://127.0.0.1/img/default/shipments.png">待发货</van-tabbar-item>
          <van-tabbar-item info="12" icon="http://127.0.0.1/img/default/consignee.png">待收货</van-tabbar-item>
          <van-tabbar-item icon="http://127.0.0.1/img/default/evaluate.png">待评价</van-tabbar-item>
          <van-tabbar-item icon="http://127.0.0.1/img/default/afterSale.png">退货/售货</van-tabbar-item>
        </van-tabbar>
      </div>
    </div>
    <div class="margin-box">
      <div class="me-box">
        <div class="me-header">
          <div>我的应用</div>
        </div>
        <div class="adhibition">
          <div class="adhibition-list">
            <div class="list-topImg"><img src="http://127.0.0.1/img/default/adhibition-list-01.png" alt=""></div>
            <div>我的资产</div>
          </div>
          <div class="adhibition-list">
            <div class="list-topImg"><img src="http://127.0.0.1/img/default/adhibition-list-02.png" alt=""></div>
            <div>我的二维码</div>
          </div>
          <div class="adhibition-list">
            <div class="list-topImg"><img src="http://127.0.0.1/img/default/adhibition-list-03.png" alt=""></div>
            <div>分销中心</div>
          </div>
          <div class="adhibition-list">
            <div class="list-topImg"><img src="http://127.0.0.1/img/default/adhibition-list-04.png" alt=""></div>
            <div>我的评价</div>
          </div>
          <div class="adhibition-list">
            <div class="list-topImg"><img src="http://127.0.0.1/img/default/adhibition-list-05.png" alt=""></div>
            <div>我的拼团</div>
          </div>
          <div class="adhibition-list">
            <div class="list-topImg"><img src="http://127.0.0.1/img/default/adhibition-list-06.png" alt=""></div>
            <div>我的砍价</div>
          </div>
          <div class="adhibition-list">
            <div class="list-topImg"><img src="http://127.0.0.1/img/default/adhibition-list-07.png" alt=""></div>
            <div>申请入驻</div>
          </div>
          <div class="adhibition-list">
            <div class="list-topImg"><img src="http://127.0.0.1/img/default/adhibition-list-08.png" alt=""></div>
            <div>成长值</div>
          </div>
          <div class="adhibition-list">
            <div class="list-topImg"><img src="http://127.0.0.1/img/default/adhibition-list-09.png" alt=""></div>
            <div>万商客服</div>
          </div>
          <div class="adhibition-list">
            <div class="list-topImg"><img src="http://127.0.0.1/img/default/adhibition-list-10.png" alt=""></div>
            <div>我的预约</div>
          </div>
        </div>
      </div>
    </div>
    <div class="margin-box">
      <div class="me-box">
        <div class="me-header">
          <div>我的优惠动态</div>
        </div>
        <div class="shop-list">
          <div class="shop-list-box">
            <div class="discounts-img">
              <img src="http://127.0.0.1/img/brands/brands-06.png" alt="">
              <span class="guess-like">猜你喜欢</span>
            </div>
            <div class="typeface">优惠团购</div>
            <div class="typeface">￥263</div>
          </div>
          <div class="shop-list-box"> 
            <div class="discounts-img">
              <img src="http://127.0.0.1/img/brands/brands-06.png" alt="">
              <span class="guess-like">猜你喜欢</span>
            </div>
            <div class="typeface">限时购</div>
            <div class="typeface">￥263</div>
          </div>
          <div class="shop-list-box">
            <div class="discounts-img">
              <img src="http://127.0.0.1/img/brands/brands-06.png" alt="">
              <span class="guess-like">猜你喜欢</span>
            </div>
            <div class="typeface">9.9包邮</div>
            <div class="typeface">￥263</div>
          </div>
          <div class="shop-list-box">
            <div class="discounts-img">
              <img src="http://127.0.0.1/img/brands/brands-06.png" alt="">
              <span class="guess-like">猜你喜欢</span>
            </div>
            <div class="typeface">积分兑换</div>
            <div class="typeface">￥263</div>
          </div>
        </div>
      </div>
    </div>
    <div class="hot-header">
      <div class="string"></div>
      <div class="header-title">为你推荐</div>
    </div>
    <ProductList></ProductList>
    <TabBar ref="myActive"></TabBar>
  </div>
</template>

<script>
import TabBar from '../components/TabBar'
import ProductList from '../components/ProductList'
import TitleBar from '../components/TitleBar'
export default {
  name: "PersonalCenter",
  components:{
    ProductList,TabBar,TitleBar
  },
  data() {
    return {
      tabBar: 4,
      titleName:{
        name:"用户中心",
        more:"http://127.0.0.1/img/more-2.png"
      }
    }
  }
};
</script>

<style lang="scss">
.hot-header {
  display: flex;
  justify-content: center;
  position: relative;
  .string {
    width: 4.533333rem;
    border: 0.013333rem solid #7e7e7e;
    position: absolute;

    top: 0.266667rem;
  }
  .header-title {
    font-size: 0.32rem;
    color: #878787;
    padding: 0.066667rem 0.133333rem;
    background: #f2f2f2;
    z-index: 1;
  }
}

.me-box{
  margin-top: .2rem;
  background: #ffffff;
  border-right: .266667rem;
  border-radius: .266667rem;
  .shop-list{
    padding: .266667rem;
    display: flex;
    justify-content: space-around;
    display: -webkit-box;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    .shop-list-box{
      width: 2.666667rem;
      height: 3.866667rem;
      margin-right: .2rem;
      background: #f2f2f2;
      .discounts-img{
        width: 100%;
        height: 2.666667rem;
        position: relative;
        img{
          width: 100%;
          height: 100%;
        }
        .guess-like{
          padding: .133333rem;
          font-size: .24rem;
          color: #fffefe;
          position: absolute;
          left: 0;
          bottom: 0;
          background: rgba(0, 0, 0, .3);
          border-top-right-radius: .266667rem;
          border-bottom-right-radius: .266667rem;
        }
      }
      .typeface{
        line-height: .6rem;
        font-size: .32rem;
        color: #fb4a4a;
        text-align: left;
      }
    }
  }
  .adhibition{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .adhibition-list{
      width: 2.36rem;
      height: 1.466667rem;
      margin: .133333rem 0;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .list-topImg{
        width: .733333rem;
        height: .733333rem;
        margin: 0 auto;
        img{
          width: 100%;
          height: 100%;
          align-items: center;
        }
      }
    }
  }
  .me-header{
    display: flex;
    justify-content: space-between;
    padding: .266667rem;
    border-bottom: .026667rem solid #f2f2f2;
    div:nth-child(1){
      font-size: .4rem;
      color: #3d3d3d;
      font-weight: 550;
    }
    div:nth-child(2){
      font-size: .293333rem;
      color: #878787;
    }
  }
  .indent{
    width: 100%;
    height: 1.6rem;
    padding: .2rem 0 .333333rem 0;
    border-bottom-left-radius: .266667rem;
    border-bottom-right-radius: .266667rem;
    border: none;
    .van-icon__image{
      width: .733333rem!important;
      height: .6rem!important;
    }
    .van-tabbar-item__icon img{
      width: .733333rem!important;
      height: .6rem!important;
    }
  }
}

.shop-list::-webkit-scrollbar {
  display: none;
}
.margin-box{
  margin: .266667rem;
}


.classify-box{
  height: 1.733333rem;
  margin: -.6rem .266667rem 0 .266667rem;
  background: #ffffff;
  border-radius: .266667rem;
  display: flex;
  justify-content: space-around;
  .classify-single{
    width: 2.333333rem;
    box-sizing: border-box;
    margin: .466667rem 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border-right: .026667rem solid #f2f2f2;
    div:nth-child(1){
      font-size: .346667rem;
      color: #3d3d3d;
    }
    div:nth-child(2){
      font-size: .346667rem;
      color: #3d3d3d;
    }
  }
  div:nth-last-child(1){
    border-right: none;
  }
}
.user-box{
  background: #222437;
  .set{
    padding-top: .133333rem;
    margin-right: .266667rem;
    display: flex;
    justify-content: flex-end;
    img{
      width: .56rem;
      height: .56rem;
    }
  }
  .user-name{
    padding-left: .4rem;
    padding-bottom: .96rem;
    font-size: .4rem;
    color: #ffffff;
    display: flex;
    justify-content: flex-start;
    div{
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
    .user-img{
      width: 1.466667rem;
      height: 1.466667rem;
      margin-right: .266667rem;
      border-radius: 50%;
      overflow: hidden;
      img{
        width: 100%;
        height: 100%;
        align-items: center;
      }
    }
  }
}
.personal{
  background: #f2f2f2;
}
.header {
  background: #ffffff !important;
  .van-icon {
    color: #000000 !important;
  }
  .van-nav-bar__title {
    color: #000000 !important;
  }
}

.more {
  display: block;
  height: 100%;

  img {
    width: 0.666667rem;
    height: 0.133333rem;
  }
}
</style>
